<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Temperate 
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20121205

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My Tracker</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300'
	rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy'
	rel='stylesheet' type='text/css' />
<link href="../css/iphone.css" rel="stylesheet" type="text/css"
	media="all" />

<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- For google map api and style -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- <meta http-equiv="refresh" content="30;url=index.html" /> -->
<script
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAR33uUSrW-Nc3NWqPUZV30Anh1DOS9oto&sensor=false"
	type="text/javascript"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript"
	src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>
<style>
.labels {
	color: white;
	background-color: #0172b6;
	font-family: "Lucida Grande", "Arial", sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	width: 25px;
	border: 1px solid black;
}

span.login {
	font-size: 2em;
	color: #000099;
	font-variant: small-caps;
	font-family: Comic Sans MS;
	font-weight: bold;
	margin-top: 5%;
}

#logintable {
	border: 1px solid black;
	background-color: white;
	padding: 10px;
}



tr,td {
	padding: 6px;
}
</style>
<script>
	window.addEventListener("load", function() {
		// Set a timeout...
		setTimeout(function() {
			// Hide the address bar!
			window.scrollTo(0, 1);
		}, 0);
	});
</script>
<script>
	window.addEventListener("orientationchange", function() {
		// Announce the new orientation number
		$("#test1").height(
				$(window).height()
						- ($("#test1").offset().top + ($("#test1").outerHeight(
								true) - $("#test1").height())));
	}, false);
</script>
<script>
	function initialize() {

		$("#test1").height(
				$(window).height()
						- ($("#test1").offset().top + ($("#test1").outerHeight(
								true) - $("#test1").height())));
	}
</script>
</head>
<body onload="initialize();">
	<form method="post" action="login">
		<div id="content" style="height:60%;">
			<div id="test1" style="margin-top:22%;">
				<table id="logintable">
					<tr>
						<td>
							<table>
								<tr>
									<td><img src="images/login.png" alt="login" width="100"
										class="middle" height="100" style="vertical-align: middle;" /></td><td><span
										class="login">PLEASE LOGIN</span></td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td>
							<table>
								<tr>
									<td width="30%">Phone Number :</td>
									<td><input type="text" id="phoneno" name="phoneno"
										maxlength="8" size="16" style="font-size: 16px;" /></td>
								</tr>
								<tr>
									<td width="30%">Passcode :</td>
									<td><input type="password" id="passcode" name="passcode"
										maxlength="4" size="16" style="font-size: 16px;" /></td>
								</tr>

								<tr>
									<td></td>
									<td><input type="submit" value="Submit"
										style="color: #0033CC; width: 100px; height: 40px; font-size: larger;" /></td>
								</tr>

							</table>
						</td>
					</tr>
				</table>
			
		</div></div>
		<div id="footer">
			<p align="center">Copyright (c) by Nanyang Polytechnic.</p>
		</div>
	</form>
</body>
</html>
